<template>
	<view class="bs-container">
		<view class="page-header">
			<text class="title">比赛列表</text>
			<text class="subtitle">Basketball Matches</text>
		</view>

		<view class="match-list">
			<view v-for="(match, index) in bsMatchesList" :key="index" class="match-item">
				<view class="match-header">
					<view class="match-info">
						<text class="match-time">{{ match.startTime }}</text>
						<!-- <text class="match-type">{{ match.matchType }}</text> -->
					</view>
					
				</view>
				<view class="match-content">
					<view class="team-info">
						<image :src="baseUrl + match.teamAImg" class="team-img"></image>
						<text class="team-name">{{ match.teamAname }}</text>
					</view>
					<view class="vs-container">
						<text class="vs">VS</text>
						<button class="join-btn" @click="handleJoin(match)">详情</button>
					</view>
					<view class="team-info">
						<image :src="baseUrl + match.teamBImg" class="team-img"></image>
						<text class="team-name">{{ match.teamBname }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="empty-tip" v-if="bsMatchesList.length === 0">
			<image src="/static/images/empty.png" mode="aspectFit" class="empty-image"></image>
			<text>暂无比赛</text>
		</view>
	</view>
</template>

<script>
import { getMatchesList, joinMatch } from "@/api/system/bs";
import config from "@/config";
export default {
	data() {
		return {
			bsMatchesList: [],
			baseUrl: config.baseUrl
		};
	},
	onShow() {
		this.getBsMatchesList();
	},
	methods: {
		async getBsMatchesList() {
			const res = await getMatchesList({
				pageNum: 1,
				pageSize: 1000
			});
			this.bsMatchesList = res.data.records;
			console.log(this.bsMatchesList);
		},
		goToAdd() {
			uni.navigateTo({
				url: "/pages/pubSaishi/pubSaishi"
			});
		},
		handleJoin(match) {
			uni.setStorageSync("bsDetal",JSON.stringify(match))
			uni.navigateTo({
				url:'/pages/bsDetail/bsDetail'
			})
			// joinMatch(match.id).then((res) => {
			// 	console.log(res);
			// 	if (res.code === 200) {
			// 		uni.showToast({
			// 			title: "加入成功",
			// 			icon: "success"
			// 		});
			// 		this.getBsMatchesList();
			// 	} else {
			// 		uni.showToast({
			// 			title: res.message,
			// 			icon: "none"
			// 		});
			// 	}
			// });
		}
	}
};
</script>

<style lang="scss">
.bs-container {
	padding: 30rpx;
	min-height: 100vh;
	background: linear-gradient(to bottom, #f0f5ff, #f5f7fa);
	position: relative;

	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 400rpx;
		background: linear-gradient(135deg, #007aff11, #0056b311);
		z-index: 0;
	}

	.page-header {
		position: relative;
		z-index: 1;
		padding: 40rpx 20rpx;
		margin-bottom: 40rpx;

		.title {
			font-size: 44rpx;
			font-weight: 600;
			color: #1a1a1a;
			margin-bottom: 8rpx;
			display: block;
		}

		.subtitle {
			font-size: 24rpx;
			color: #666;
			letter-spacing: 2rpx;
		}
	}

	.match-list {
		position: relative;
		z-index: 1;

		.match-item {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
			transition: all 0.3s ease;
			border: 1rpx solid rgba(0, 122, 255, 0.1);
			position: relative;
			overflow: hidden;

			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 6rpx;
				// background: linear-gradient(to right, #007aff, #0056b3);
			}

			&:active {
				transform: scale(0.98);
			}

			.match-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;

				.match-info {
					display: flex;
					align-items: center;
					gap: 20rpx;
				}

				.match-time {
					color: #1a1a1a;
					font-size: 28rpx;
					font-weight: 500;
				}

				.match-type {
					color: #007aff;
					font-size: 24rpx;
					background: rgba(0, 122, 255, 0.1);
					padding: 4rpx 16rpx;
					border-radius: 20rpx;
				}

				.match-stats {
					.stats-item {
						font-size: 24rpx;
						color: #666;
						background: #f5f7fa;
						padding: 4rpx 16rpx;
						border-radius: 20rpx;
					}
				}
			}

			.match-content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 0;

				.team-info {
					display: flex;
					flex-direction: column;
					align-items: center;
					flex: 1;
					position: relative;

					&::after {
						content: "";
						position: absolute;
						bottom: -10rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 40rpx;
						height: 4rpx;
						background: linear-gradient(to right, transparent, #007aff, transparent);
					}

					.team-img {
						width: 140rpx;
						height: 140rpx;
						border-radius: 70rpx;
						margin-bottom: 16rpx;
						border: 4rpx solid #f0f0f0;
						transition: all 0.3s ease;
						box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

						&:active {
							transform: scale(0.95);
						}
					}

					.team-name {
						font-size: 30rpx;
						color: #333;
						font-weight: 500;
					}
				}

				.vs-container {
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 20rpx;

					.vs {
						position: relative;

						&::before,
						&::after {
							content: "";
							position: absolute;
							top: 50%;
							width: 40rpx;
							height: 2rpx;
							background: #ddd;
						}

						&::before {
							right: 100%;
							margin-right: 10rpx;
						}

						&::after {
							left: 100%;
							margin-left: 10rpx;
						}
					}

					.join-btn {
						background: linear-gradient(135deg, #007aff, #0056b3);
						color: #fff;
						font-size: 28rpx;
						padding: 12rpx 36rpx;
						border-radius: 40rpx;
						border: none;
						min-width: 120rpx;
						font-weight: 500;
						box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
						transition: all 0.3s ease;

						&:active {
							transform: scale(0.95);
							box-shadow: 0 2rpx 6rpx rgba(0, 122, 255, 0.2);
						}
					}
				}
			}
		}
	}

	.empty-tip {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 100rpx 0;
		color: #999;
		font-size: 28rpx;

		.empty-image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
			opacity: 0.5;
		}
	}
}
</style>
